<template>
  <div class="mobile-ip-info-detail">
    <div class="cover-container">
      <img :src="workData.cover || defaultMengli" alt="">
    </div>
    <el-row :gutter="12" class="data-list">
      <el-col v-for="(item, index) in dataList" :span="item.span||8" :key="index" class="data-item">
        <div class="label">{{ item.label }}</div>
        <div class="num">{{ item.data }}</div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { moneyFilter, bigDataFilter } from '@/filters/number';
import { format } from '@/filters/date';

import InfoContainer from './ModuleComponents/InfoItemContainer';
export default {
  filters: { moneyFilter, format, bigDataFilter },
  components: { InfoContainer },
  props: {
    workData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {

    };
  },
  computed: {
    dataList() {
      const workData = this.workData;
      if (!workData.account) {
        return [
          { label: '表情数量', data: this.handelNum(workData.workNum) },
          { label: '表情包类型', data: ['', '原创', '商业', '联名'][workData.type] || '--' },
          { label: '表情包效果', data: workData.type ? workData.type === 1 ? '动态' : '静态' : '--' },
          { label: '总下载量', data: bigDataFilter(workData.downloadNum) },
          { label: '总发送量', data: bigDataFilter(workData.sendNum) },
          { label: '总赞赏次数', data: moneyFilter(workData.rewardNum) },
          { label: '总赞赏金额', data: moneyFilter(workData.rewardPrice) },
          { label: '上架时间', data: format(workData.publishTime, 'YYYY/MM/DD') }
        ];
      }
      const charge = !workData.charge && workData.charge !== 0 ? '--' : workData.charge === 0 ? '免费' : `¥${moneyFilter(workData.charge, true, '', true)}`;
      return [
        { label: '表情数量', data: this.handelNum(workData.workNum) },
        { label: '表情包类型', data: ['', '原创', '商业', '联名'][workData.type] || '--' },
        { label: '表情包效果', data: workData.type ? workData.type === 1 ? '动态' : '静态' : '--' },
        { label: '收费方式', data: charge },
        { label: '总下载量', data: bigDataFilter(workData.downloadNum) },
        { label: '总发送量', data: bigDataFilter(workData.sendNum) },
        { label: '总赞赏次数', data: moneyFilter(workData.rewardNum) },
        { label: '总赞赏金额', data: moneyFilter(workData.rewardPrice) },
        { label: '上架时间', data: format(workData.publishTime, 'YYYY/MM/DD') },
        { label: '发布账号', data: workData.account, span: 24 }
      ];
    }
  },
  methods: {
    handelNum(data) {
      if (!data && data !== 0) return '--';
      return bigDataFilter(data);
    }
  }
};
</script>
<style lang="scss" scoped>
.mobile-ip-info-detail {
  .cover-container {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius:8px;
    }
  }
}

.data-list {
  margin-top: 12px;
  margin-bottom: 12px;
  .data-item {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #dde1ea;
    &:nth-child(3n) {
      padding-right: 0;
      margin-right: 0;
      border-right: none;
    }
    &:last-child {
      padding-right: 0;
      margin-right: 0;
      border-right: none;
    }
    .label {
      color: #999999;
      font-size: 14px;
      margin-bottom: 4px;
    }
    .num {
      font-size: 16px;
      font-family: PingFangSC-Medium,PingFang SC;
      font-weight: 500;
      color: #333333;
      flex-shrink: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 12px;
    }
  }
}
</style>
